<template>
  <view class="flex justify-between items-center w-[90%] mx-auto">
    <view>
      <text class="text-2xl font-bold">儿童列表</text>
    </view>
    <view @click="navigateToAdd">
      <wd-icon name="add" size="20" color="#007AFF" />
    </view>
  </view>
  <view class="w-[90%] mx-auto mt-[20rpx]">
    <view class="w-[100%] flex justify-between items-center flex-col gap-5">
      <view
        v-for="item in childList"
        :key="item.id"
        class="w-[100%] flex justify-between items-center py-5 shadow-[0_0_10rpx_rgba(0,0,0,0.1)] rounded-[10rpx]"
        @click="navigateToDetail(item)"
      >
        <view class="w-[80px] h-[80px] rounded-full overflow-hidden p-[20rpx]">
          <image :src="item.headImg" mode="scaleToFill" class="w-full h-full" />
        </view>
        <view
          class="flex flex-col justify-between items-start text-[#555] w-[70%] gap-1"
        >
          <view class="text-[#000]">{{ item.name }}</view>
          <view>{{ item.phone }}</view>
          <view>{{ item.homeAddress }}</view>
        </view>
        <view class="w-[20%] flex justify-end items-center">
          <wd-icon name="arrow-right" size="20" color="#555" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getChildInfo } from '@/api/user.api'

const childList = ref<IChild[]>([])

const navigateToDetail = (item: any) => {
  uni.navigateTo({
    url: '/pages/children/childrenInfo?childId=' + item.id
  })
}

const navigateToAdd = () => {
  uni.navigateTo({
    url: '/pages/children/childrenInfo'
  })
}

onMounted(async () => {
  const res = await getChildInfo<IChild>({
    userId: uni.getStorageSync('user').id
  })
  if (res.code === 200) {
    childList.value = res.data.items
  }
})

onShow(async () => {
  const res = await getChildInfo<IChild>({
    userId: uni.getStorageSync('user').id
  })
  if (res.code === 200) {
    childList.value = res.data.items
  }
})
</script>
